<template>
    <div class="zwc" v-if="textSj?.list">
        <!-- 导航栏 -->
        <van-nav-bar title="阅读" left-arrow @click-left="$router.push({ path: '/home' })">
            <template #right>
                <van-icon name="label-o" size="18" />
            </template>
        </van-nav-bar>

        <h3>{{ list.title }}</h3>

        <div class="xwz">
            {{ list?.json_content?.simple_author[0] }}
        </div>

        <!-- 播放 -->
        <van-row v-if="yuedurb !== true" class="bfdiv" justify="space-between" @click="togglePlay">
            <div class="icontb">
                <!-- 静音 -->
                <svg v-show="bfjy == false" t="1676628187702" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="20714" width="16" height="16">
                    <path
                        d="M524.8 149.333333h-2.133333c-8.533333 0-17.066667 2.133333-25.6 8.533334-125.866667 108.8-192 166.4-198.4 172.8H196.266667c-12.8 0-23.466667 4.266667-32 12.8-10.666667 10.666667-14.933333 21.333333-14.933334 32v277.333333c0 12.8 4.266667 23.466667 12.8 32 8.533333 8.533333 19.2 12.8 32 12.8H298.666667c2.133333 2.133333 21.333333 19.2 53.333333 46.933333 32 27.733333 66.133333 55.466667 96 81.066667 32 25.6 46.933333 40.533333 49.066667 40.533333 8.533333 6.4 17.066667 8.533333 25.6 8.533334h2.133333c17.066667-2.133333 27.733333-12.8 32-32v-661.333334c-4.266667-19.2-14.933333-29.866667-32-32z m-8.533333 676.266667c-6.4-4.266667-198.4-170.666667-198.4-170.666667H194.133333V371.2h123.733334s46.933333-42.666667 198.4-174.933333v629.333333zM776.533333 512l89.6-89.6c8.533333-8.533333 8.533333-21.333333 0-29.866667s-21.333333-8.533333-29.866666 0L746.666667 482.133333l-89.6-89.6c-8.533333-8.533333-21.333333-8.533333-29.866667 0s-8.533333 21.333333 0 29.866667l89.6 89.6-89.6 89.6c-8.533333 8.533333-8.533333 21.333333 0 29.866667s21.333333 8.533333 29.866667 0l89.6-89.6 89.6 89.6c8.533333 8.533333 21.333333 8.533333 29.866666 0s8.533333-21.333333 0-29.866667L776.533333 512z"
                        fill="#bfbfbf" p-id="20715"></path>
                </svg>
                <!-- 播放 -->
                <svg v-show="bfjy" t="1676635055119" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="22727" width="16" height="16">
                    <path d="M872.802928 755.99406 872.864326 755.99406 872.864326 755.624646Z" fill="#bfbfbf" p-id="22728">
                    </path>
                    <path
                        d="M744.055658 192.799074c-4.814656-2.889817-9.601682-5.251607-15.442714-5.251607-14.262842 0-25.758664 11.559267-25.758664 25.805736 0 10.285251 6.088672 18.519796 14.6957 23.195282 94.679359 55.247278 158.344355 157.787676 158.344355 275.30416 0 117.424386-63.605643 219.931015-158.159136 275.18034-8.29492 4.538363-15.442714 13.050224-15.442714 23.583115 0 14.261818 11.559267 25.820062 25.791409 25.820062 5.716188 0 10.252505-2.202155 15.22475-5.063319 109.871363-64.133669 183.764304-183.143157 183.764304-319.520197C927.074995 375.785665 853.495186 257.010515 744.055658 192.799074z"
                        fill="#bfbfbf" p-id="22729"></path>
                    <path
                        d="M773.946432 511.867994c0-79.96524-43.344181-149.739373-107.821681-187.289594-2.920516-1.52268-9.785877-4.520967-14.603603-4.520967-14.325263 0-25.914206 11.589966-25.914206 25.89988 0 9.616008 5.096065 18.176988 12.865006 22.666232 49.839105 28.307719 83.45983 81.829703 83.45983 143.244448 0 62.472843-34.801621 116.817566-86.070284 144.750755-7.457856 4.538363-12.397355 12.803607-12.397355 22.188348 0 14.325263 11.588943 25.943882 25.882484 25.943882 6.090718 0.031722 13.33061-3.542686 13.33061-3.542686C729.048873 664.171772 773.946432 593.294514 773.946432 511.867994z"
                        fill="#bfbfbf" p-id="22730"></path>
                    <path
                        d="M541.3694 124.672464c-10.846022-5.219885-23.740704-3.790326-33.215496 3.712555-0.435928 0.358157-46.423309 36.914748-97.195669 74.296123-88.308255 65.081251-114.036219 75.925227-119.257128 77.649498l-110.6194 0c-0.63752 0-1.243317 0.062422-1.879813 0.093121l-56.504922 0c-14.231119 0-25.775037 11.543917-25.775037 25.775037l0 411.697573c0 14.261818 11.512195 25.761734 25.775037 25.761734l189.511191 0.027629c5.096065 1.865487 29.395494 13.0799 107.761306 76.999698 45.613874 37.162388 86.505189 73.485665 86.940095 73.829496 5.841032 5.218862 13.298887 7.92039 20.820188 7.92039 4.349051 0 8.729825-0.930185 12.862959-2.764973 11.277858-5.064342 18.517749-16.252149 18.517749-28.619828 0 0 0.031722-97.257068 0.031722-132.212184 0.808412-2.484587 1.213641-5.127787 1.213641-7.863085 0-2.792603-1.245364-578.026786-1.245364-578.026786C559.110459 140.892891 552.214399 129.924071 541.3694 124.672464zM508.308423 726.470653c0 1.494027-0.467651 94.617961-0.467651 94.617961-13.889335-11.745509-29.332049-24.64019-45.240367-37.507242-104.59008-84.702124-130.505309-91.816149-148.030451-91.816149-0.372483 0-0.683569 0.091074-1.025353 0.091074s-0.652869-0.091074-1.025353-0.091074L170.394297 691.765223c-18.037818 0-22.248723-5.128811-22.248723-23.246447L148.145573 352.559685c0-12.32163 1.461281-20.057825 16.298198-20.057825l128.065747 0c17.090237 0 43.315528-6.991228 157.787676-90.839915 20.383236-14.914688 40.330544-29.938869 57.544601-43.113937 0 0 0.373507 445.207781 0.467651 521.368368C507.779374 722.028481 508.308423 724.234729 508.308423 726.470653z"
                        fill="#bfbfbf" p-id="22731"></path>
                </svg>
            </div>
            <van-col span="18"
                style="display: flex;align-items: center;box-sizing: border-box;padding-left: 40px;font-size: 14px;">有声阅读 |
                {{ list.anchor }}</van-col>
            <van-col span="6"
                style="display: flex;align-items: center;justify-content: flex-end;box-sizing: border-box;padding-right: 10px;">
                <div>
                    <audio ref="audio" :src="audioSrc"></audio>
                    <span>{{ formatTime(timeLeft) }}</span>
                </div>
            </van-col>
        </van-row>

        <div class="xrym" v-html="textSj?.list?.json_content?.content"></div>

        <!-- 底部编辑 -->
        <div class="bjxwz">{{ textSj?.list?.json_content?.editor }}</div>
        <div class="bjxwz">{{ textSj?.list?.json_content?.copyright }}</div>

        <!-- 作者 -->
        <div class="zzjj">作者</div>

        <div class="zztx">
            <img :src="textSj?.list?.json_content?.author?.authors[0].avatar" alt="">
            <div>
                <div>{{ textSj?.list?.json_content?.author?.authors[0]?.name }}</div>
                <div>{{ textSj?.list?.json_content?.author?.authors[0]?.brief }}</div>
            </div>
            <div class="ddgz">关注</div>
        </div>

        <div class="zzjj">评论列表</div>

        <div v-for="(item, index) in textSj?.list2?.data" :key="index">
            <van-row justify="space-between" style="margin: 10px 0;">
                <van-col span="12" class="plqzb">
                    <img :src="item?.user?.web_url" alt="">
                    <div class="plyhm">{{ item?.user?.user_name }}</div>
                </van-col>
                <van-col span="12" class="plqyb">{{ item.input_date }}</van-col>
            </van-row>
            <div class="plqpl">{{ item?.content }}</div>

            <van-row justify="end">
                <van-col span="24" class="plqyxtb">
                    <svg t="1676653158760" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2789" width="16" height="16">
                        <path
                            d="M872.4266666666666 61.440000000000055H151.57333333333338c-49.6 0-89.70666666666666 40.53333333333333-89.70666666666666 90.13333333333333l-0.4266666666666667 810.9866666666666 180.26666666666665-180.26666666666665h630.7199999999999c49.6 0 90.13333333333333-40.53333333333333 90.13333333333333-90.13333333333333V151.57333333333338c0-49.6-40.53333333333333-90.13333333333333-90.13333333333333-90.13333333333333zM376.85333333333335 466.9866666666667h-90.13333333333333v-90.13333333333333h90.13333333333333v90.13333333333333z m180.16 0h-90.13333333333333v-90.13333333333333h90.13333333333333v90.13333333333333z m180.26666666666665 0h-90.13333333333333v-90.13333333333333h90.13333333333333v90.13333333333333z"
                            p-id="2790" fill="#bfbfbf"></path>
                    </svg>
                    <div style="display: flex;justify-content: center;margin-left: 10px;">
                        <!-- 点亮红心 -->
                        <svg v-if="item.reviewed == 0" @click="item.reviewed = 1" t="1676653188270" class="icon"
                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3939" width="16"
                            height="16">
                            <path
                                d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                                p-id="3940" fill="#bfbfbf"></path>
                        </svg>
                        <svg v-if="item.reviewed == 1" @click="item.reviewed = 0" t="1676653970616" class="icon"
                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4431" width="16"
                            height="16">
                            <path
                                d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                                p-id="4432" fill="#fe6c0a"></path>
                        </svg>
                        <div style="margin-left: 5px;">{{ item.reviewed == 0 ? item.praisenum : (item.praisenum - 0) + 1 }}
                        </div>
                    </div>
                </van-col>
            </van-row>
            <van-divider />


        </div>

        <!-- 写评论 -->
        <van-row justify="space-between" class="xygpl">
            <van-col span="12" style="display: flex;align-items: center;box-sizing: border-box;padding-left: 10px;">
                <div
                    style="width: 110px;height: 35px;border: 1px solid #c9c9c9;border-radius: 5px;text-align: center;line-height: 35px;">
                    写一个评论..</div>
            </van-col>
            <van-col span="12" class="xygplyb">
                <!-- 爱心 -->
                <svg v-if="reviewed == 0" @click="reviewed = 1" t="1676608723950" class="icon" viewBox="0 0 1024 1024"
                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11545" width="16" height="16">
                    <path
                        d="M533.504 268.288q33.792-41.984 71.68-75.776 32.768-27.648 74.24-50.176t86.528-19.456q63.488 5.12 105.984 30.208t67.584 63.488 34.304 87.04 6.144 99.84-17.92 97.792-36.864 87.04-48.64 74.752-53.248 61.952q-40.96 41.984-85.504 78.336t-84.992 62.464-73.728 41.472-51.712 15.36q-20.48 1.024-52.224-14.336t-69.632-41.472-79.872-61.952-82.944-75.776q-26.624-25.6-57.344-59.392t-57.856-74.24-46.592-87.552-21.504-100.352 11.264-99.84 39.936-83.456 65.536-61.952 88.064-35.328q24.576-5.12 49.152-1.536t48.128 12.288 45.056 22.016 40.96 27.648q45.056 33.792 86.016 80.896z"
                        p-id="11546" fill="#bfbfbf"></path>
                </svg>
                <!-- 爱心亮 -->
                <svg v-if="reviewed == 1" @click="reviewed = 0" t="1676655682572" class="icon" viewBox="0 0 1024 1024"
                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5687" width="16" height="16">
                    <path
                        d="M533.504 268.288q33.792-41.984 71.68-75.776 32.768-27.648 74.24-50.176t86.528-19.456q63.488 5.12 105.984 30.208t67.584 63.488 34.304 87.04 6.144 99.84-17.92 97.792-36.864 87.04-48.64 74.752-53.248 61.952q-40.96 41.984-85.504 78.336t-84.992 62.464-73.728 41.472-51.712 15.36q-20.48 1.024-52.224-14.336t-69.632-41.472-79.872-61.952-82.944-75.776q-26.624-25.6-57.344-59.392t-57.856-74.24-46.592-87.552-21.504-100.352 11.264-99.84 39.936-83.456 65.536-61.952 88.064-35.328q24.576-5.12 49.152-1.536t48.128 12.288 45.056 22.016 40.96 27.648q45.056 33.792 86.016 80.896z"
                        p-id="5688" fill="#d81e06"></path>
                </svg>
                <div style="margin-left: 5px;margin-right: 10px;">{{ reviewed == 0 ? 100 : 100 + 1 }}</div>

                <svg t="1676704434645" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="3637" width="16" height="16">
                    <path
                        d="M185.2 888.7c-16.6 0-30-13.4-30-30v-580c0-49.6 40.4-90 90-90h540c49.6 0 90 40.4 90 90v410c0 49.6-40.4 90-90 90h-429c-16.6 0-30-13.4-30-30s13.4-30 30-30h429c16.5 0 30-13.5 30-30v-410c0-16.5-13.5-30-30-30h-540c-16.5 0-30 13.5-30 30v580c0 16.5-13.5 30-30 30z m490.1-430.5H347c-16.6 0-30-13.4-30-30s13.4-30 30-30h328.3c16.6 0 30 13.4 30 30s-13.4 30-30 30zM494 598.2H345.7c-16.6 0-30-13.4-30-30s13.4-30 30-30H494c16.6 0 30 13.4 30 30s-13.4 30-30 30zM194.2 883.7c-9.8 0-19.3-4.8-25.1-13.5-9.1-13.9-5.2-32.5 8.6-41.5l160-105c13.9-9.1 32.5-5.2 41.5 8.6 9.1 13.9 5.2 32.5-8.6 41.5l-160 105c-5 3.3-10.8 4.9-16.4 4.9z"
                        fill="#bfbfbf" p-id="3638"></path>
                </svg>
                <div style="margin-left: 5px;margin-right: 10px;">20</div>

                <svg t="1676704494016" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="4823" width="16" height="16">
                    <path
                        d="M865.922728 583.211878c-16.276708 0-29.580712 13.246699-29.667693 29.727045l0 215.125569c0 17.992793-14.58723 32.637328-32.520671 32.637328L181.762717 860.70182c-17.935488 0-32.520671-14.645558-32.520671-32.637328L149.242046 292.155966c0-17.992793 14.586207-32.637328 32.520671-32.637328l291.230897 0c16.304338-0.029676 29.580712-13.363356 29.580712-29.724998 0-16.392342-13.276375-29.727045-29.610388-29.727045l-295.336402 0c-48.358381 0-87.721901 39.450501-87.721901 87.925538l0 544.205493c0 48.475038 39.36352 87.925538 87.721901 87.925538l630.239961 0c48.358381 0 87.720877-39.450501 87.720877-87.925538L895.588375 612.762915C895.501394 596.458577 882.19739 583.211878 865.922728 583.211878z"
                        fill="#bfbfbf" p-id="4824"></path>
                    <path
                        d="M930.818761 338.183256l0-0.318248L727.07645 133.511783l-6.435573-6.259564-0.814552 0.844228c-4.511757-2.532683-9.606799-3.873214-14.876826-3.873214-16.974603 0-30.774911 13.829983-30.774911 30.832216 0 5.298679 1.338485 10.393721 3.873214 14.907525l-0.903579 0.931209 141.845589 142.224212-145.573493 0.057305C436.396091 342.726735 378.197598 489.375723 361.049033 717.050096c0 17.004279 13.800307 30.832216 30.772864 30.832216 13.858636 0 25.620517-9.229199 29.464055-21.893636l1.397836-8.181333c18.022469-215.329207 60.470233-321.567833 251.839749-342.937536l144.466276 0L683.433464 510.804778l-5.502317 7.744381c-1.951445 4.104481-2.969635 9.112542-2.969635 13.654998 0 17.002232 13.799284 30.832216 30.772864 30.832216 4.832052 0 10.160407-1.164522 14.439874-3.37691L929.954067 350.740246c1.860371-1.305739 4.140297-4.52506 4.140297-6.970762C934.093341 341.323782 932.679132 339.488994 930.818761 338.183256z"
                        fill="#bfbfbf" p-id="4825"></path>
                </svg>

            </van-col>
        </van-row>
    </div>
    <div v-if="textSj?.list == null || textSj?.list == undefined">
        <van-loading size="24px" style="text-align: center;margin-top: 300px;">加载中...</van-loading>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref, onUnmounted ,onBeforeUnmount} from '@vue/runtime-core'
import axios from '../plugins/axiosInstance';
const textSj = reactive({
    list: {}
})
const list = ref('')
const audioSrc = ref('http://music.wufazhuce.com/ltDCohhrB3mDfPW3StNd8ubPQKYB')
const audio = ref(null);
const playing = ref(false);
const intervalId = ref(null);
const timeLeft = ref(null);
const bfjy = ref(false);
let reviewed = ref(0)


const formatTime = (timeInSeconds) => {
    if (!timeInSeconds) {
        return '';
    }

    const hours = Math.floor(timeInSeconds / 3600);
    const minutes = Math.floor((timeInSeconds % 3600) / 60);
    const seconds = Math.floor(timeInSeconds % 60);

    const formattedMinutes = minutes.toString().padStart(2, '0');
    const formattedSeconds = seconds.toString().padStart(2, '0');

    if (hours > 0) {
        const formattedHours = hours.toString().padStart(2, '0');
        return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
    } else {
        return `${formattedMinutes}:${formattedSeconds}`;
    }
};

const togglePlay = () => {
    bfjy.value = !bfjy.value
    if (audio.value.paused) {
        audio.value.play();
        playing.value = true;
        intervalId.value = setInterval(() => {
            timeLeft.value = audio.value.duration - audio.value.currentTime;
            if (timeLeft.value <= 0) {
                audio.value.pause();
                playing.value = false;
                clearInterval(intervalId?.value);
            }
        }, 1000);
    } else {
        audio.value.pause();
        playing.value = false;
        clearInterval(intervalId?.value);
    }
};
const yuedurb = ref('')
onUnmounted(() => {
    clearInterval(intervalId?.value);
});
onMounted(() => {
    audio.value.addEventListener('loadedmetadata', () => {
        timeLeft.value = audio?.value?.duration;
    });
    // 获取文章
    let yueduId = JSON.parse(localStorage.getItem('yueduId'))
    yuedurb.value = JSON.parse(localStorage.getItem('yuedurb'))
    axios({
        url: `https://apis.netstart.cn/one/essay/htmlcontent/${yueduId}`,
        method: 'get'
    }).then((res) => {
        textSj.list = res?.data?.data
        list.value = textSj?.list
        console.log(list);
        audioSrc.value = textSj?.list?.audio
    }).catch(()=>{})
    // 获取文章评论 0代表第一页
    axios({
        url: `https://apis.netstart.cn/one/comment/praiseandtime/essay/${yueduId}/0`,
        method: 'get'
    }).then((res) => {
        textSj.list2 = res?.data?.data
        console.log(textSj.list2);
    }).catch(()=>{})
})
onBeforeUnmount(() => {
    yuedurb.value = false
    localStorage.setItem('yuedurb', JSON.stringify(false))
})
</script>

<style lang="less" scoped>
.xygplyb {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
    padding-right: 20px;
}

.xygpl {
    width: 100%;
    height: 50px;
    background-color: #fbfbfb;
    position: fixed;
    bottom: 0;
}

.zwm {
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 50px;
}

.xwz {
    font-size: 12px;
    margin: 10px 0;
}

.dwz {
    font-size: 14px;
    margin: 10px 0;
}

.plqpl {
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
}

.plqyxtb {
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    padding-right: 10px;
    align-items: center;
}

.plqzb {
    display: flex;
    align-items: center;

    img {
        width: 30px;
        height: 30px;
        border-radius: 20px;
        margin-left: 10px;
    }

    .plyhm {
        box-sizing: border-box;
        padding-left: 10px;
        font-size: 14px;
        color: #a8a8a8;
    }
}

.plqyb {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #959595;
    font-size: 14px;
}

.zzjj {
    font-size: 14px;
    border-bottom: 5px solid black;
    display: flex;
    align-items: flex-start;
    width: 60px;
    height: 30px;
}

.zztx {
    margin: 10px;
    display: flex;

    img {
        width: 40px;
        height: 40px;
        border-radius: 100%;
    }

    div {
        height: 40px;
        width: 100%;
        box-sizing: border-box;
        padding-left: 10px;
        position: relative;

        div {
            width: 100%;
            height: 50%;
        }

        div:nth-child(2) {
            font-size: 12px;
            color: #828282;
        }
    }

    .ddgz {
        display: flex;
        box-sizing: border-box;
        justify-content: center;
        width: 80px;
        height: 30px;
        border: 1px solid #b8b8b8;
        border-radius: 20px;
        line-height: 30px;
        padding: 0;
    }
}

.xrym {
    margin-top: 20px;
    box-sizing: border-box;
    padding: 10px;
}

.zwc {
    box-sizing: border-box;
    padding: 10px;
}

.xwz {
    font-size: 12px;
    margin: 10px 0;
    color: #484848;
}

.bfdiv {
    width: 100%;
    border-radius: 5px;
    border: 1px solid #707070;
    height: 40px;
    position: relative;

    .icontb {
        position: absolute;
        top: calc(50% - 8px);
        left: 10px;
    }
}

.bjxwz {
    font-size: 12px;
    padding: 5px 0;
    color: #8a8a8a;
}
</style>